<template>
  <div class="app-container">
    <div id="map" />
    <el-button
      class="colCardBox"
      style=""
      icon="el-icon-d-arrow-right"
      @click="collapseCardBox"
    />
    <div class="card">

      <!-- <el-button style="margin-left:60px;margin-top:12px"
                 type="primary"
                 plain
                 @click="quickStatistics">{{ $t('realtime.customStatistics') }}</el-button> -->
      <!-- <el-button type="danger"
                 plain
                 @click="quickEvacuate">{{ $t('realtime.rapidEvacuation') }}</el-button>

      <el-button type="primary"
                 plain
                 style="margin-left:70px;"
                 @click="visitorOR">{{ visitor }}</el-button> -->
      <el-tooltip
        class="item"
        effect="dark"
        :content="$t('realtime.customStatistics')"
        placement="bottom"
      >
        <el-button
          style="margin-left:60px;margin-top:12px"
          type="primary"
          plain
          icon="el-icon-notebook-1"
          circle
          @click="quickStatistics"
        />
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        :content="$t('realtime.rapidEvacuation')"
        placement="bottom"
      >
        <el-button
          type="danger"
          plain
          icon="el-icon-warning"
          circle
          @click="quickEvacuate"
        />
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        :content="visitor"
        placement="bottom"
      >
        <el-button
          type="primary"
          plain
          style="margin-left:70px;"
          icon="el-icon-user"
          circle
          @click="visitorOR"
        />
      </el-tooltip>
      <!-- <el-button type="primary"
                 style="margin-left:70px;"
                 @click="test2">测试</el-button> -->
      <div class="handle">
        <el-select
          v-model="value"
          :placeholder="$t('operating.pleaseChosen')"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          icon="el-icon-search"
          circle
          style="background-color:rgb(239 209 42); color: #fff;"
          @click="search()"
        />

      </div>
      <div class="handle">
        <el-collapse v-model="activeNames">
          <el-collapse-item
            :title="$t('realtime.map')"
            name="1"
          >
            <el-tree
              :data="mapTreeData"
              :props="v_DefaultProps"
              @node-click="nodeClick"
            />
          </el-collapse-item>
          <el-collapse-item
            :title="$t('realtime.resourceList')"
            name="2"
          >
            <el-collapse
              class="collapse2"
              accordion
            >
              <el-collapse-item
                :title="$t('realtime.areaList')"
                name="first"
              >
                <el-table
                  :data="tableFence"
                  max-height="200"
                  @select="clickShowFence"
                  @select-all="clickShowCompleteFence"
                >
                  <el-table-column
                    type="selection"
                    width="30"
                  />
                  <el-table-column
                    prop="fenceName"
                    :label="$t('realtime.fenceName')"
                  />
                </el-table>
              </el-collapse-item>
              <el-collapse-item :title="$t('realtime.cameraList')">
                <el-table
                  :data="tableGamera"
                  max-height="200"
                  @select="clickShowCamera"
                  @select-all="clickShowCompleteCamera"
                >
                  <el-table-column
                    type="selection"
                    width="30"
                  />
                  <el-table-column
                    prop="cameraName"
                    :label="$t('realtime.fenceName')"
                  />
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <el-dialog
      title="30分钟轨迹查询"
      :visible.sync="isDialog"
      :destroy-on-close="true"
      @opened="openDialog"
    >
      <div id="map2" />
    </el-dialog>
    <div
      id="popup"
      class="ol-popup"
    >
      <a
        id="popup-closer"
        href="#"
        class="ol-popup-closer"
      />
      <div id="popup-content" />
      <el-button
        id="trackHistory"
        icon="el-icon-share"
        size="mini"
        @click="isDialog=true"
      />
    </div>
    <!-- 摄像头弹框 -->
    <div
      id="popup2"
      class="ol-popup"
    >
      <a
        id="popup-closer2"
        href="#"
        class="ol-popup-closer"
      />
      <div id="popup-content2">
        <cus-player
          ref="video0"
          style="position:relative"
        />
      </div>
    </div>
    <el-dialog
      :title="$t('realtime.resourceList')"
      :visible.sync="dialogVisible2"
      width="30%"
      @open="resourceStatistics"
    >
      <el-table
        :data="tableData"
        style="width:100%"
      >
        <el-table-column
          prop="name"
          :label="$t('areaTrackPlayback.name')"
        />
        <el-table-column
          prop="resourceId"
          :label="$t('areaTrackPlayback.tagId')"
        />
        <el-table-column
          prop="deptname"
          :label="$t('areaTrackPlayback.department')"
        />
      </el-table>
    </el-dialog>
    <el-dialog
      :title="$t('realtime.rapidEvacuation')"
      :visible.sync="dialogVisible3"
      width="30%"
      @open="resourceStatistics"
    >
      <el-form label-width="120px">
        <el-form-item :label="$t('realtime.emergencyEvacuation.shortMessage')">
          <el-select
            v-model="shortMessage"
            :placeholder="$t('operating.pleaseChosen')"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>

        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="float:right;"
            @click="shortSupport"
          >{{ $t('operating.determine') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="positiondiv">
      <span />
    </div>
    <div class="scalediv">
      <span />
    </div>

    <div
      id="histogram"
      class="histogram"
    />
  </div>
</template>

<script>
import CusPlayer from './cameraComment/CusPlayer'
import { GeoJSON } from 'ol/format.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import i18n from '@/utils/lang/index'
import { Draw } from 'ol/interaction.js'
import { createBox } from 'ol/interaction/Draw.js'
import collapsebox from '@/views/changchun/components/collapsebox'
import {
  getMapTree,
  getMap,
  getAllDeptDetail
} from '@/api/location'
import {
  View
} from 'ol'
import { LineString } from 'ol/geom.js'
import {
  sendThis,
  Load_Map,
  _iMap,
  _iMap2,
  _TransPixel,
  TagStyle,
  _Style,
  updateOverPopupPosition,
  FenceStyle,
  _TransMetric3,
  _TransMetric2,
  _TransMetricFence,
  _dPR,
  getFenceList,
  getCameraList_,
  addSingleFence,
  addSingleCamera,
  addAnchor,
  initCameraLayer,
  initAnchor,
  getFenceById,
  Load_TrackMap,
  Load_Camera,
  cameraSource,
  MapClick,
  removeOverlay_
} from '@/utils/historyMap.js'
import Overlay from 'ol/Overlay'
import {
  Style,
  Icon,
  Text,
  Fill,
  Stroke,
  Circle
} from 'ol/style'
import { Vector as VectorSource } from 'ol/source.js'
import { Vector as VectorLayer } from 'ol/layer.js'
import Point from 'ol/geom/Point'
import Feature from 'ol/Feature'
import {
  webSockUrl,
  webSockStatisticsUrl,
  cameraServerUrl,
  baseUrl,
  initPicPath,
  webSockMonitorUrl,
  rateHeartShow
} from '@/utils/global'
import {
  getHistoryInfoDetail,
  oneKeyOut,
  anchor
} from '@/api/system/historyDisplayInfo.js'
import echarts from 'echarts'
import { getToken } from '@/utils/auth'
export default {
  components: { Treeselect, CusPlayer },
  data() {
    return {
      deptObjData: [],
      mapTreeData: [],
      mapId: null,
      colCardBox: false,
      options: [],
      options2: [],
      value: '',
      activeNames: ['1', '2'],
      v_DefaultProps: {
        children: 'children',
        label: 'label'
      },
      oldMapId: null,
      tableFence: [], // 围栏列表数据
      fenceId: null,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      color: null,
      color2: null,
      systemID: null,
      ws: null,
      TagSource: null,
      TagLayer: null,
      isDialog: false,
      bLockEx: true,
      featureId: null,
      rloading: [],
      feature_: null,
      trackData: [],
      posLength: null,
      trackTagSource: null,
      trackTagLayer: null,
      lineSource: null,
      lineLayer: null,
      currentPos: null,
      setTImeOut_: null,
      visitor: i18n.t('operating.visitorHide'),
      draw_: null,
      tableData: [],
      evacuateMessage: {},
      shortMessage: null,
      layerName: null,
      tableGamera: [],
      cameraModify: null,
      videoIndex: 0,
      playUrl: '', // 播放的url
      temp: 10,
      TagSource2: null,
      TagLayer2: null,
      pathlist: [],
      myChart: null,
      options3: {
        tooltip: {},
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        xAxis: {
          data: ['车辆', '人员', '其他标签'],
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#000',
              textBorderColor: '#FFF'
            }
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: '#000',
              textBorderColor: '#FFF'
            }
          }
        },
        series: [{
          name: '类型',
          type: 'bar',
          data: [0, 0, 0],
          itemStyle: {
            normal: {
              barBorderRadius: 2,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [{
                  offset: 0,
                  color: '#0fc3f0'
                },
                {
                  offset: 0.7,
                  color: '#0a87cf'
                },
                {
                  offset: 1,
                  color: '#0a62cf'
                }
                ]
              ),
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'black',
                  fontSize: 16,
                  textBorderColor: '#FFF'
                }
              }
            }
          }
        }]
      }
    }
  },
  mounted() {
    this.initData()

    Date.prototype.Format = function(fmt) { // author: meizz
      var o = {
        'M+': this.getMonth() + 1, // 月份
        'd+': this.getDate(), // 日
        'h+': this.getHours(), // 小时
        'm+': this.getMinutes(), // 分
        's+': this.getSeconds(), // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        'S': this.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
      for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
      return fmt
    }
    this.getDicts('sys_view_index').then(response => {
      this.options2 = this.Dictionary(response.data)
    })
  },
  beforeDestroy() {
    this.ws.close()
    clearTimeout(this.setTImeOut_)
    removeOverlay_()
  },
  methods: {

    anchorlist() {
      anchor().then(res => {
        addAnchor(res)
      })
    },
    getAllDeptDetail() {
      getAllDeptDetail().then(res => {
        const RES = this.responseUse(res)
        if (typeof RES !== 'undefined') {
          this.deptObjData = RES
        }
      })
    },
    collapseCardBox() {
      this.colCardBox = !this.colCardBox
      if (this.colCardBox) {
        $('.card').css('display', 'none')
        $('.colCardBox').css('right', '0')
        $('.colCardBox i').attr('class', 'el-icon-d-arrow-left')
      } else {
        $('.card').css('display', 'block')
        $('.colCardBox').css('right', '230px')
        $('.colCardBox i').attr('class', 'el-icon-d-arrow-right')
      }
    },
    search() {
      if (this.value == '') {
        return
      }
      const currentFeature = this.TagSource.getFeatureById(this.value)
      MapClick(currentFeature)
      _iMap.getView().setCenter([currentFeature.get('pos_x'), currentFeature.get('pos_y')])
    },
    initData() {
      this.webSocketPosition()
      getMapTree().then((res) => {
        const RES = this.responseUse(res)
        if (typeof RES !== 'undefined') {
          this.mapTreeData = RES
          sendThis(this)
          this.mapId = RES[0].id
          this.layerName = RES[0].label
          console.log(this.mapId, this.layerName)
          this.getMapData()
        }
      })

      this.myChart = echarts.init(document.getElementById('histogram'))
      this.myChart.setOption(this.options3)
    },
    clickShowFence(row) {
      addSingleFence(row)
    },
    clickShowCompleteFence(row) {
      addSingleFence(row)
    },
    clickShowCamera(sel, row) {
      const currentCamera = cameraSource.getFeatureById(row.idx)
      if (currentCamera != null) {
        cameraSource.removeFeature(currentCamera)
      } else {
        addSingleCamera(sel)
      }
    },
    clickShowCompleteCamera(row) {
      if (row.length != 0) {
        addSingleCamera(row)
      } else {
        cameraSource.clear()
      }
    },
    getMapData() {
      if (this.mapId == this.oldMapId) {
        this.$message({
          message: i18n.t('realtime.areaQequired'),
          type: 'warning'
        })
      } else {
        this.oldMapId = this.mapId
        getMap(this.mapId).then(res => {
          const RES = this.responseUse(res)
          if (RES != undefined) {
            $('#map').empty()
            Load_Map(baseUrl + '/file' + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX, [RES.mapOriginX, RES.mapOriginY], true)
            getFenceList(this.mapId)
            getCameraList_(this.mapId)
            initCameraLayer()
            initAnchor()
            this.loadLayer()
            // this.anchorlist()
            this.options = []
            this.value = ''
            this.$refs.video0.closePlayer()
            const param = JSON.stringify({
              key: this.systemID,
              layerId: this.mapId
            })

            this.webSocketOnSend(param)
            const self = this
            setTimeout(function() {
              let car = 0
              let people = 0
              let other = 0
              if (self.TagSource.getFeatures().length > 0) {
                const features = self.TagSource.getFeatures()
                features.forEach(function(f) {
                  console.log(f.get('type'))
                  switch (f.get('type')) {
                    case 'car':
                      car += 1
                      break
                    case 'staff':
                      people += 1
                      break
                    default:
                      other += 1
                      break
                  }
                })
              }
              self.options3.series[0].data = []
              self.options3.series[0].data.push(car)
              self.options3.series[0].data.push(people)
              self.options3.series[0].data.push(other)
              self.myChart.setOption(self.options3, true)
            }, 1000)
          }
        })
        if (this.myChart != null) {
          this.myChart.setOption(this.options3, true)
        }
      }
    },
    nodeClick(draggingNode) {
      this.mapId = draggingNode.id
      this.layerName = draggingNode.label
      this.getMapData()
    },
    // websocket
    webSocketPosition() {
      const self = this
      self.systemID = new Date().getTime().toString()
      var param = JSON.stringify({
        register: self.systemID
      })
      if ('WebSocket' in window) {
        // self.ws = new WebSocket(webSockUrl)
        console.log('查看推送地址', webSockUrl, getToken())
        const kkkk = 'Bearer ' + getToken()
        self.ws = new WebSocket(webSockUrl)
        self.ws.onopen = function() {
          console.log(param)
          self.webSocketOnSend(param)
          console.log('数据发送中...')
        }
        self.ws.onmessage = function(evt) {
          self.getMessage(evt.data)
        }
        self.ws.onclose = function(res) {
          console.log('连接已关闭', res, webSockUrl)
        }
        self.ws.onerror = function(err) {
          console.log('连接东西而已', err, webSockUrl)
        }
      } else {
        console.log('您的浏览器不支持WebSocket!')
      }
    },
    webSocketOnSend(data) {
      const self = this
      if (self.ws.readyState === 1) {
        self.ws.send(data)
      }
    },

    getMessage(el) {
      const self = this
      const result = $.parseJSON(el)
      if (result.message === 'handshake') {
      } else if (result.message === 'Point') {
        if (self.bLockEx) {
          self.bLockEx = false
          const format = new GeoJSON()
          const newFeatures = format.readFeatures(result.data)
          newFeatures.forEach(function(f) {
            const coords = _TransPixel(f.getGeometry().getCoordinates())
            const tag = self.TagSource.getFeatureById(f.get('resourceId'))
            if (tag != null) {
              if (tag.get('pos_x') - 0.3 > f.get('pos_x') || tag.get('pos_x') + 0.3 < f.get('pos_x') ||
                tag.get('pos_y') - 0.3 > f.get('pos_y') || tag.get('pos_y') + 0.3 < f.get('pos_y')) {
                tag.set('pos_x', f.get('pos_x'))
                tag.set('pos_y', f.get('pos_y'))
                tag.set('axis', f.get('axis'))
                tag.getGeometry().setCoordinates(coords)
                updateOverPopupPosition(tag, coords)
              }
            } else {
              f.getGeometry().setCoordinates(coords)
              f.setId(f.get('resourceId'))
              f.set('visible', true)
              self.TagSource.addFeature(f)
              self.options.push({
                label: f.get('itemname'),
                value: f.get('resourceId')
              })
            }
          })
          self.bLockEx = true
        }
      }
    },
    loadLayer() {
      if (this.TagSource != null) {
        this.TagSource.clear()
      }
      this.TagSource = new VectorSource({
        wrapX: false
      })
      this.TagLayer = new VectorLayer({
        source: this.TagSource,
        zIndex: 99,
        style: function(feature) {
          return TagStyle(feature, 0)
        }
      })
      _iMap.addLayer(this.TagLayer)

      if (this.TagSource2 != null) {
        this.TagSource2.clear()
      }
      this.TagSource2 = new VectorSource({
        wrapX: false
      })
      this.TagLayer2 = new VectorLayer({
        source: this.TagSource2,
        zIndex: 9,
        style: function(feature) {
          return TagStyle(feature, 0)
        }
      })
      _iMap.addLayer(this.TagLayer2)
    },
    test() {
      var feature = this.TagSource.getFeatureById('tagle')
      // feature.setStyle(new Style({
      //   image: new Icon({
      //     src: '/static/icon/5ren.png',
      //     color: 'yellow',
      //     opacity: 0.4
      //   }),
      //   text: new Text({
      //     text: '222',
      //     offsetY: 14,
      //     fill: new Fill({
      //       color: '#fff'
      //     }),
      //     stroke: new Stroke({
      //       color: '#000',
      //       width: 3
      //     }),
      //     rotation: 0
      //   })
      //   // zIndex: 999
      // }))

      // feature.changed()
      var measureTooltipElement = document.createElement('div')
      measureTooltipElement.className = 'point_animation'
      var p = document.createElement('p')
      var span = document.createElement('span')
      measureTooltipElement.appendChild(p)
      measureTooltipElement.appendChild(span)
      var measureTooltip = new Overlay({
        id: 6,
        element: measureTooltipElement,
        offset: [-3, -4],
        positioning: 'bottom-center'
      })
      _iMap.addOverlay(measureTooltip)

      measureTooltip.setPosition(_TransPixel([feature.get('pos_x'), feature.get('pos_y')]))
    },
    test2() {
      // let currentPoint = new Feature({
      //   geometry: new Point([-201.05026415094338, 606.8229433962264])
      // });
      // currentPoint.set('visible', true);
      // this.TagSource2.addFeature(currentPoint);

      var feature = this.TagSource.getFeatureById('E0CF')
      feature.setStyle(new Style({
        image: new Icon({
          src: '/static/icon/5ren.png',
          color: 'yellow',
          opacity: 0.4
        }),
        text: new Text({
          text: '222',
          offsetY: 14,
          fill: new Fill({
            color: '#fff'
          }),
          stroke: new Stroke({
            color: '#000',
            width: 3
          }),
          rotation: 0
        })
        // zIndex: 999
      }))

      feature.changed()
      var measureTooltipElement = document.createElement('div')
      measureTooltipElement.className = 'point_animation'
      var p = document.createElement('p')
      var span = document.createElement('span')
      measureTooltipElement.appendChild(p)
      measureTooltipElement.appendChild(span)
      var measureTooltip = new Overlay({
        id: 6,
        element: measureTooltipElement,
        offset: [-3, -4],
        positioning: 'bottom-center',
        insertFirst: false,
        className: 'testss'
      })
      _iMap.addOverlay(measureTooltip)
      measureTooltip.setPosition(_TransPixel([feature.get('pos_x'), feature.get('pos_y')]))
      // 给绑定的元素添加点击事件
      $(measureTooltipElement).click(function() {
        MapClick(feature)
      })
    },
    quickStatistics() {
      const self = this
      if (self.draw_ != null) {
        _iMap.removeInteraction(self.draw_)
      }
      self.draw_ = new Draw({
        source: this.TagSource,
        type: 'Circle',
        geometryFunction: createBox()
      })
      _iMap.addInteraction(self.draw_)
      self.draw_.on('drawend', function(evt) {
        const coors = evt.feature.getGeometry().getCoordinates()[0]
        self.tableData = []
        self.TagSource.getFeatures().forEach((val) => {
          const coors_ = val.getGeometry().getCoordinates()
          if (coors_[0] <= coors[1][0] && coors_[0] >= coors[0][0] && coors_[1] <= coors[2][1] && coors_[1] >= coors[0][1]) {
            const param = {
              name: val.get('name'),
              resourceId: val.get('resourceId'),
              deptname: val.get('deptname')
            }
            self.tableData.push(param)
          }
        })
        self.dialogVisible2 = true
      })
    },
    quickEvacuate() {
      const self = this
      if (self.draw_ != null) {
        _iMap.removeInteraction(self.draw_)
      }
      self.draw_ = new Draw({
        source: this.TagSource,
        type: 'Circle',
        geometryFunction: createBox()
      })
      _iMap.addInteraction(self.draw_)
      self.draw_.on('drawend', function(evt) {
        self.evacuateMessage = {}
        self.evacuateMessage = {
          posGroupArray: eval('[' + _TransMetric2(evt.feature.getGeometry().getCoordinates(), 2).toString() + ']'),
          layerId: parseInt(self.mapId),
          layerName: self.layerName
        }
        self.dialogVisible3 = true
      })
    },
    shortSupport() {
      this.evacuateMessage.des = this.shortMessage
      this.evacuateMessage.startTime = (new Date()).Format('yyyy-MM-dd hh:mm:ss')
      this.dialogVisible3 = false
      this.shortMessage = null

      oneKeyOut(this.evacuateMessage).then((response) => {

      })
    },
    resourceStatistics() {
      _iMap.removeInteraction(this.draw_)
    },
    visitorOR() {
      if (this.visitor == i18n.t('operating.visitorHide')) {
        this.TagSource.getFeatures().forEach((val) => {
          if (val.get('type') == '' || val.get('type') == undefined) {
            val.set('visible', false)
          }
        })
        this.visitor = i18n.t('operating.visitorShow')
      } else {
        this.TagSource.getFeatures().forEach((val) => {
          if (val.get('type') == '' || val.get('type') == undefined) {
            val.set('visible', true)
          }
        })
        this.visitor = i18n.t('operating.visitorHide')
      }
    },
    openDialog() {
      getMap(this.mapId).then(res => {
        const RES = this.responseUse(res)
        if (RES != undefined) {
          $('#map2').empty()
          Load_TrackMap(baseUrl + '/file' + RES.mapPath, RES.mapActualX,
            RES.mapActualY,
            RES.mapPixelX,
            RES.mapPixelY,
            RES.mapPixelX / RES.mapActualX, [RES.mapOriginX, RES.mapOriginY])
        }
        this.loadTrackLayer()
        this.getTrackRoad()
      })
    },
    getTrackRoad() {
      this.rloading = this.$loading({
        lock: true,
        text: i18n.t('areaTrackPlayback.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)'
      })
      clearTimeout(this.setTImeOut_)
      this.currentPos = 0
      const startTime = (new Date(new Date().getTime() - 1000 * 60 * 30)).Format('yyyy-MM-dd hh:mm:ss')
      const endTime = (new Date()).Format('yyyy-MM-dd hh:mm:ss')
      const param = {
        'mapId': this.mapId,
        'resourceId': this.featureId,
        'startTime': startTime,
        'endTime': endTime
      }
      getHistoryInfoDetail(param).then(res => {
        this.rloading.close()
        const RES = this.responseUse(res)
        if (undefined != RES && RES.length > 0) {
          var point = new Point(_TransPixel([RES[0].posX, RES[0].posY]))
          this.feature_ = new Feature(point)
          this.feature_.set('type', RES[0].type)
          this.feature_.set('name', RES[0].resourceName)
          this.feature_.set('visible', true)
          this.feature_.set('workTypeName', RES[0].workTypeName)
          this.feature_.setId(RES[0].tagId)
          this.trackTagSource.addFeature(this.feature_)
          this.trackData = RES
          this.posLength = RES.length
          // 开始点
          const startVector = this.feature_.clone()
          startVector.setId('startVector')
          startVector.set('name', '')
          startVector.set('type', 'startVector')
          this.trackTagSource.addFeature(startVector)
          // 结束点
          const endVector = this.feature_.clone()
          endVector.setId('endVector')
          endVector.set('name', '')
          endVector.set('type', 'endVector')
          endVector.getGeometry().setCoordinates(_TransPixel([this.trackData[this.posLength - 1].posX, this.trackData[this.posLength - 1].posY]))
          this.trackTagSource.addFeature(endVector)
          $('.playbtn i').attr('class', 'al-icon-carpause')
          this.drawLine()
        } else {
          this.$message({
            message: i18n.t('operating.switchQuery')
          })
        }
      })
    },
    drawLine() {
      var self = this
      self.progressIndex = self.currentPos
      if (self.currentPos > self.posLength || self.posLength == 0) {
        return
      }
      if (self.currentPos == self.posLength || self.currentPos == self.posLength - 1) {
        // 点位移动
        var from = _TransPixel([self.trackData[self.posLength - 1].posX, self.trackData[self.posLength - 1].posY])

        self.feature_.getGeometry().setCoordinates(from)
      } else {
        var from = _TransPixel([self.trackData[self.currentPos].posX, self.trackData[self.currentPos].posY])
        var to = _TransPixel([self.trackData[self.currentPos + 1].posX, self.trackData[self.currentPos + 1].posY])
        // 点位移动
        self.feature_.getGeometry().setCoordinates(to)
        // 画线
        var lineFeature = new Feature(new LineString([from, to]))
        self.lineSource.addFeature(lineFeature)
      }
      self.currentPos++
      self.setTImeOut_ = setTimeout(function() {
        self.drawLine()
      }, self.temp)
    },
    loadTrackLayer() {
      if (this.trackTagSource != null) {
        this.trackTagSource.clear()
      }
      this.trackTagSource = new VectorSource({
        wrapX: false
      })
      this.trackTagLayer = new VectorLayer({
        source: this.trackTagSource,
        style: function(feature) {
          return TagStyle(feature, 0)
        }
      })
      if (this.lineSource != null) {
        this.lineSource.clear()
      }
      this.lineSource = new VectorSource({
        wrapX: false
      })
      this.lineLayer = new VectorLayer({
        source: this.lineSource,
        style: new Style({
          stroke: new Stroke({
            color: 'green',
            width: 3
          })
        })
      })
      _iMap2.addLayer(this.lineLayer)
      _iMap2.addLayer(this.trackTagLayer)
    },
    handlePlay() {
      if (this.playUrl) {
        const ref = 'video' + this.videoIndex
        this.$refs.video0.createPlayer(this.playUrl, false, this.videoIndex)
      } else {
        this.$message.error('请填写播放地址')
      }
    }
  }
}
</script>

<style>
.map-container {
  width: 100%;
  height: 100%;
  /* height: calc(100% - 100px); */
}
div.map-container #map {
  height: 100%;
}
.collapse-handle {
  margin-top: 12px;
}

.container {
  width: 100%;
  height: calc(100vh - 50px);
  padding: 0;
  box-sizing: border-box;
}
#map {
  width: 100%;
  height: 100%;
  background: rgb(238, 238, 238);
}
.card {
  width: 300px;
  z-index: 1;
  position: absolute;
  top: 0px;
  right: 0px;
  background: white;
  padding: 12px;
  border-radius: 5px;
}
.handle {
  width: 100%;
  margin-top: 10px;
}
.colCardBox {
  position: absolute;
  top: 22px;
  right: 230px;
  z-index: 999;
}
.collapse2 .el-collapse-item__header {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  background-image: linear-gradient(180deg, #fff, #fff) !important;
  padding-left: 20px;
}

.point_animation {
  background: #ff0000;
  width: 0px;
  height: 0px;
  border: 0px #ff0000 solid;
  border-radius: 50%;
  position: absolute;
}

.point_animation p,
.point_animation span {
  position: absolute;
  width: 4px;
  height: 4px;
  animation: point_animation 1.5s infinite;
  box-shadow: 0px 0px 3px #ff0000;
  margin: 0px;
  border-radius: 50%;
}
.point_animation span {
  animation-delay: 0.8s;
}
@keyframes point_animation {
  10% {
    transform: scale(1);
  }
  100% {
    transform: scale(8);
  }
}
.css_animation {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background: rgba(255, 0, 0, 0.9);
  transform: scale(0);
  animation: mypoint 3s;
  animation-iteration-count: infinite;
}
@keyframes mypoint {
  to {
    transform: scale(1.5);
    background: rgba(0, 0, 0, 0);
  }
}

.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 180px;
  display: none;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}

#popup-content2 {
  width: 250px;
  height: 200px;
  background: black;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

#map2 {
  width: 100%;
  height: 500px;
}

.histogram {
  position: absolute;
  bottom: 10px;
  left: 150px;
  width: 200px;
  height: 150px;
}
</style>
